<template>
  <div
    ref="actionRef"
    class="captcha-action display-flex flex-align flex-justify"
    :class="{ transition: backLeft, 'border-radius': isDragging }"
    :style
  >
    <slot name="icon">
      <core-right-double-arrow-icon v-if="!isPassing" />
      <core-check-mark-icon v-else />
    </slot>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useTemplateRef } from 'vue'
import type { ActionExposes, ActionProps } from './types'

const props = withDefaults(defineProps<ActionProps>(), {
  actionStyle: () => ({}),
  isPassing: false,
  backLeft: false
})

const actionRef = useTemplateRef<HTMLDivElement>('actionRef')

const left = ref('0')

const style = computed(() => {
  return {
    ...props.actionStyle,
    left: left.value
  }
})

const isDragging = computed(() => {
  const currentLeft = Number.parseInt(left.value)
  return currentLeft > 10 && !props.isPassing
})

const getEl = () => actionRef.value

const getStyle = () => actionRef.value?.style

const setLeft = (val: string) => {
  left.value = val
}

defineExpose<ActionExposes>({
  getEl,
  getStyle,
  setLeft
})

defineOptions({
  name: 'CoreCaptchaAction'
})
</script>

<style scoped lang="scss">
.captcha-action {
  position: absolute;
  top: 0;
  height: 100%;
  padding: 0 14px;
  font-size: 16px;
  cursor: move;
  background-color: var(--core-bg-color-01);
  box-shadow:
    0 0 rgb(0 0 0 / 0%),
    0 0 rgb(0 0 0 / 0%),
    0 4px 6px -1px rgb(0 0 0 / 10%),
    0 2px 4px -2px rgb(0 0 0 / 10%);

  &.transition {
    left: 0 !important;
    transition: left 0.3s;
  }

  &.border-radius {
    border-radius: 6px;
  }

  svg {
    opacity: 0.6;
  }
}
</style>
